<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<h2>消息</h2>
		<view class="header">
			<view class="item" @tap="seleFn(1)">
				<image src="@/static/img/infoIcon1.png" mode=""></image>
				<view :class="{msg:true,active:seleItem == 1}">
					平台公告
				</view>
				<view v-if="num1 > 0" class="num">
					{{num1}}
				</view>
			</view>
			<view class="item" @tap="seleFn(2)">
				<image src="@/static/img/infoIcon2.png" mode=""></image>
				<view :class="{msg:true,active:seleItem == 2}">
					盈利消息
				</view>
				<view v-if="num2 > 0" class="num">
					{{num2}}
				</view>
			</view>
			<view class="item" @tap="seleFn(3)">
				<image src="@/static/img/infoIcon3.png" mode=""></image>
				<view :class="{msg:true,active:seleItem == 3}">
					损耗消息
				</view>
				<view v-if="num3 > 0" class="num">
					{{num3}}
				</view>
			</view>
		</view>
		<view class="all" v-if="userInfo.is_leader != 1 && userInfo.is_manager != 1" @tap="readAll">
			全部已读
		</view>
		<u-empty v-if="list.length == 0 && isShow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
			text="暂无消息"></u-empty>
		<ul class="list">
			<li class="item" v-for="(item,index) in list" :key="index">
				<view class="one">
					<view class="msg">
						{{item.type_name}}
					</view>
					<view class="time" v-if="item.is_read == 1">
						已读
					</view>
					<view class="time" v-if="item.is_read == 0">
						未读
					</view>
				</view>
				<view class="time">
					{{item.createtime}}
				</view>
				<view class="con">
					{{item.content}}
				</view>
				<view class="the" @tap="routerTo(`/pages/innerinfo/innerDetail?id=${item.id}`)">
					<view class="msg">
						查看详情
					</view>
					<image src="@/static/img/right.png" mode=""></image>
				</view>
			</li>
		</ul>
		<innerTabbar seleTabbar="2"></innerTabbar>
	</view>
</template>

<script>
	import {
		Notices,
		allRead,
		innerinfo
	} from '@/api/inner.js'
	import innerTabbar from '../../components/innerTabbar.vue';
	export default {
		components: {
			innerTabbar
		},
		data() {
			return {
				list: [],
				isShow: false,
				num1: 0,
				num2: 0,
				num3: 0,
				watermark: '',
				type: 'platform',
				page: 1,
				per_page: 15,
				last_page: '',
				seleItem: 1,
				userInfo:{}
			};
		},
		onLoad() {
			this.watermark = uni.getStorageSync('watermark')
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getInfo() {
				let res = await innerinfo();
				console.log(res)
				this.userInfo = res.data;
			},
			async readAll() {
				let res = await allRead({
					type: this.type
				})
				if (res.code == 1) {
					this.getList()
				} else {

				}
			},
			seleFn(i) {
				if (i == 1) {
					this.type = 'platform'
				} else if (i == 2) {
					this.type = 'profile'
				} else {
					this.type = 'cost'
				}
				this.getList()
				this.seleItem = i
			},
			async getList() {
				this.isShow = false
				let res = await Notices({
					type: this.type
				})
				console.log(res)
				this.num1 = res.data.num1
				this.num2 = res.data.num2
				this.num3 = res.data.num3
				this.list = res.data.lists.data
				this.last_page = res.data.lists.last_page
				this.isShow = true
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 50px);
		background-color: #f2f4f5;
		padding: 40px 15px;

		h2 {
			font-size: 20px;
			color: #3D3D3D;
			margin-bottom: 15px;
			font-weight: 700;
		}

		.header {
			padding: 20px 15px;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 8px;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #232323;
				position: relative;

				image {
					width: 46px;
					height: 46px;
					margin-bottom: 5px;
				}

				.msg {
					font-weight: 400;
					color: #999999;
					font-size: 14px;
				}

				.active {
					font-weight: 700;
					color: #000;
					font-size: 14px;
				}

				.num {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 10px;
					width: 15px;
					height: 15px;
					text-align: center;
					line-height: 15px;
					color: #fff;
					background-color: red;
					border-radius: 100px;
				}
			}
		}

		.all {
			margin: 15px 0;
			display: flex;
			justify-content: flex-end;
			color: #666666;
			font-size: 14px;
		}

		.list {
			padding-bottom: 15px;

			.item {
				padding: 15px;
				background-color: #fff;
				border-radius: 8px;
				margin-bottom: 10px;

				.one {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.msg {
						color: #232323;
					}

					.time {
						font-size: 11px;
						color: #999999;
					}
				}

				.time {
					margin: 5px 0;
					font-size: 11px;
					color: #999999;
				}

				.con {
					font-size: 11px;
					color: #666666;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					padding-bottom: 5px;
					border-bottom: 1px solid #E4E4E4;
					margin-bottom: 7px;
				}

				.the {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.msg {
						font-size: 12px;
						color: #3D3D3D;
					}

					image {
						width: 16px;
						height: 16px;
					}
				}
			}
		}
	}
</style>